以往在取得物件內的屬性都要一個個取下去

    const o = {
      people: {
        name: 'joe',
        age: 18,
      },
    }
    
    o.people.name // joe

在 ES6 有了解構之後，可以用 {} 的方式只取出當下那層的屬性並宣告成變數

    const o = {
      people: {
        name: 'joe',
        age: 18,
      },
    }
    const {
      people: {
        name,
      },
    } = o;
    name // joe
    
    =>
    const name = o.people.name;

有些情況像是今天資料是從後端傳來，可能是個商品列表資料 (Array)，但她若沒有資料時，忘記給空陣列，反而甚麼都沒給，取出來時是 undefined，去跑 loop render，當然就報錯，而解構提供給取出的屬性預設值的功能，所以像剛剛的情況可以在取值時順便給予預設值。

    const data = {
      next_request_endpoint: '...',
    };
    const {
      products = [],
    } = data;

最後是可以重新命名屬性名稱

    const data = {
      next_request_url: '...',
      products: [],
    };
    const {
      products: productList = [], // 重新命名且給予預設值
    } = data;

Object

1. 只取出需要的屬性
2. 可以給予預設值
3. 可以取出屬性並重新命名

Array

• 只取出需要的元素，名字部分在取出時已可以自定義

    var arr = [1 ,2 ,3];
    var [a, b, c] = arr;
    var [a, , c] = arr; // 可以不寫變數等於跳過這個元素

• 可以給予預設值

    var arr = [1 ,2];
    var [a, b, c = 0] = arr; // 元素沒有值時可以給預設值

• 可以做變數互換

    var a = 0;
    var b = 1;
    [b, a] = [a, b];